<template>
  <div class="addAccount">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>添加子账号</span>
        </div>
      </template>
    </el-card>
    <div class="bg-fff account pl-30">
      <p class="box flex jc-sb">
        <span>账号:</span>
        <input type="text" v-model="account" />
      </p>
      <p class="box flex jc-sb">
        <span>用户名称:</span>
        <input type="text" v-model="username" />
      </p>
      <p class="box flex jc-sb">
        <span>密码:</span>
        <input type="text" v-model="aaa" />
      </p>
      <p class="box flex jc-sb">
        <span>确认密码:</span>
        <input type="text" v-model="bbb" />
      </p>
    </div>
    <div class="radio flex fdc pl-30 bg-fff">
      <span>类型:</span>
      <el-radio-group v-model="type">
        <el-radio label="1">超级管理员(所有权限)</el-radio>
        <el-radio label="2">管理员(部分权限)</el-radio>
        <el-radio label="3">用户(只读权限)</el-radio>
      </el-radio-group>
    </div>
    <div class="miaoshu flex bg-fff pl-30 aic">
      <span>账号描述 &nbsp;&nbsp;&nbsp;</span>
      <textarea v-model="desc"></textarea>
    </div>
    <el-row class="yes mb-4 bg-fff pl-30 flex aic">
      <el-button type="primary" @click="yesAdd">确认</el-button>
      <el-button>取消</el-button>
    </el-row>
  </div>
</template>


<script setup>
import { ref } from "vue";
import * as api from "@/api/index";
import { useRouter } from "vue-router";
const radio = ref(3);
const change = (num) => {
  console.log(num);
};
const router = useRouter();

const account = ref("");
const username = ref("");
const type = ref("");
const desc = ref("");
const aaa = ref("");
const bbb = ref("");
const yesAdd = () => {
  let data = {
    account: account.value,
    username: username.value,
    type: type.value,
    desc: desc.value,
    password: aaa.value,
  };
  api.$accountAdd(data).then((res) => {
    console.log(res);
    router.push("/account/list");
  });
};
</script>
<style scoped>
.addAccount {
  margin: 10px;
}
.yes {
  height: 100px;
}
.radio {
  height: 100px;
}
.box {
  width: 270px;
  height: 30px;
  padding-top: 15px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.el-card {
  --el-card-border-color: var(--el-border-color-light);
  --el-card-border-radius: 4px;
  --el-card-padding: none;
  --el-card-bg-color: var(--el-fill-color-blank);
}
</style>
